<template>
	<view>
		<!-- 轮播 -->
		<swiper>
			<swiper-item v-for="item in banners" :key="">
				<img :src="item.image_url" alt=""class="swiper-img">
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav-content" v-for="item in nav" :key="">
				<img :src="item.icon_url" alt="" class="nav-img">
				<p>{{item.name}}</p>
			</view>
		</view>
		<!-- 商品制造直供 -->
		<view class="shop">
			品牌制造商直供
		</view>
		<ul class="shop-list">
			<li v-for="item in list" :key="item.id">
				<img :src="item.new_pic_url" alt="">
				<p>{{item.name}}</p>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners:[],		//轮播图
				nav:[],			//导航
				list:[],		//商品列表
				
			};
		},
		methods: {
			async getdata(){
				let {data:{banner:res}} = await uni.$http.get('index/index')
				this.banners = res;
				// console.log(res);
			},
			async getnav(){
				let {data:{channel:res}} = await uni.$http.get('index/index')
				this.nav = res;
				// console.log(res);
			},
			async getlist(){
				let {data:{brandList:res}} = await uni.$http.get('index/index')
				this.list = res;
				console.log(res);
			}
		},
		onLoad() {
			this.getdata()
			this.getnav()
			this.getlist()
		}
	}
</script>

<style lang="scss">
.swiper-img{
	width: 100%;
}
.nav{
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
	.nav-img{
		width: 100rpx;
		height: 100rpx;
	}
}
.shop{
	width: 100%;
	height: 100rpx;
	border-top: 2rpx solid #ccc;
	border-bottom: 2rpx solid #ccc;
	text-align: center;
	line-height: 100rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.shop-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	li{
		width: 48%;
		margin-top: 20rpx;
		img{
			width: 100%;
		}
		p{
			text-align: center;
		}
	}
}
</style>
